<template>
  <div class="userColumnConfig">
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      :before-close="handleClose"
      :close-on-click-modal:="closeOnClickModal"
      append-to-body
    >
      <el-table
        ref="tableColumnControl"
        row-key="label"
        :data="tableData"
        :cell-style="cellStyle"
        border
      >
        <el-table-column prop="label" label="列名" align="center">
        </el-table-column>
        <el-table-column prop="show" label="显示" align="center">
          <template slot-scope="scope">
            <span @click="cellClick(scope)">{{ formatterColumns(scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fixed" label="锁定" align="center">
          <template slot-scope="scope">
            <span @click="cellClick(scope)">{{ formatterColumns(scope) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset()" size="medium">重 置</el-button>
        <el-button @click="cancel()" size="medium">取 消</el-button>
        <el-button type="primary" @click="save()" size="medium"
          >确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Message from "../../utils/Messager";
import _ from "lodash";
import Sortable from "sortablejs";
// import api from "@api/base/base-api";

export default {
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    source: {
      type: String,
      default: () => {
        return {};
      }
    },
    columnConfig: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      showDialog: false,
      title: "个性化设置",
      closeOnClickModal: true,
      cellRed: { "font-size": "16px", color: "#F56C6C", cursor: "pointer" },
      cellGreen: { "font-size": "16px", color: "#67C23A", cursor: "pointer" },
      tableData: []
    };
  },
  watch: {
    show(newValue) {
      this.showDialog = newValue;
      if (newValue) {
        this.tableData = _.cloneDeep(this.columnConfig);
        this.$nextTick(function() {
          const table = this.$refs.tableColumnControl.$el.querySelector(
            ".el-table__body-wrapper tbody"
          );
          const self = this;
          Sortable.create(table, {
            draggable: ".el-table__row",
            animation: 150,
            onEnd({ newIndex, oldIndex }) {
              const targetRow = self.tableData.splice(oldIndex, 1)[0];
              self.tableData.splice(newIndex, 0, targetRow);
            }
          });
        });
      }
    }
  },
  methods: {
    async refreshTable() {
      await Utils.TableColumnControl.refreshCustomConfig();
      const columns = _.cloneDeep(this.tableData);
      this.$emit("refresh-columns", columns);
    },
    formatterColumns(scope) {
      const prop = scope.column.property;
      if (prop == "show" || prop == "fixed") {
        return scope.row[prop] ? "√" : "×";
      }
      return scope.row["label"];
    },
    cellStyle({ row, column }) {
      if (column.property == "show") {
        return row.show ? this.cellGreen : this.cellRed;
      } else if (column.property == "fixed") {
        return row.fixed ? this.cellGreen : this.cellRed;
      } else {
        return {};
      }
    },
    cellClick(scope) {
      const prop = scope.column.property;
      if (prop == "show" || prop == "fixed") {
        scope.row[prop] = !scope.row[prop];
        this.$set(this.tableData, scope.$index, scope.row);
      }
    },
    handleClose() {
      this.$emit("close");
    },
    async save() {
      const result = await api.addGridConfig(this.tableData);
      if (result.code == 0) {
        Message.ok({ message: result.message });
        this.refreshTable();
        this.handleClose();
      } else {
        Message.error({ message: result.message });
      }
    },
    async reset() {
      const gridId = this.source;
      const result = await api.resetGridConfig({ gridId: gridId });
      if (result.code == 0) {
        Message.ok({ message: result.message });
        await this.refreshTable();
        this.handleClose();
      } else {
        Message.error({ message: result.message });
      }
    },
    cancel() {
      this.handleClose();
    }
  }
};
</script>

<style scoped lang="scss">
/**************滚动条样式start *****************/
::v-deep {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 12px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #bbb;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #f6f6f6;
    border-radius: 10px;
  }
}
/**********************滚动条样式end ******************/
</style>
